<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
  <div id="app">
    
  </div>

  <script type="text/javascript">
    let vm = new Vue({
      el: "#app",
      data: {
        
      },
      methods: {
        updateOrientation() {
          let orientation = window.orientation;
          if (window.orientation == 90 || window.orientation == -90) {
            alert("横屏")
            return 1 // 横屏
          } else {
            alert("竖屏")
            return 2 // 竖屏
          }
        },
        change(func) {
          if (!func) return false
          if (func() === 1) { return false}
          return true
        }
      },
      created() {
        window.addEventListener('orientationchange', this.updateOrientation, false)
        this.updateOrientation()
      }
    })

    /** 
    1.$nextTick只要调用一定会执行，只不过如果有dom更新，就会在dom更新之后执行
    2.这里的dom更新指的是虚拟的dom更新，还没有重新渲染到页面上
    
    **/
  </script>
</body>
</html>